<template>
  <div>
    <van-cell title="选择优惠券" is-link @click="show = true">
      已选择{{ selectedCoupons.length }}张优惠券
    </van-cell>
    <van-popup v-model="show" position="bottom">
      <van-checkbox-group v-model="selectedCoupons">
        <van-checkbox v-for="coupon in coupons" :key="coupon.id" :name="coupon.id">
          {{ coupon.description }} - 减{{ coupon.discount }}元
        </van-checkbox>
      </van-checkbox-group>
      <div style="margin: 16px;">
        <van-button type="primary" block @click="confirmCoupons">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const coupons = ref([
  { id: '1', description: '满100减10', discount: 10 },
  { id: '2', description: '满200减30', discount: 30 },
  { id: '3', description: '满300减50', discount: 50 }
]);

const selectedCoupons = ref([]);
const show = ref(false);

const confirmCoupons = () => {
  show.value = false;
  console.log('Selected Coupons:', selectedCoupons.value);
  // 这里可以进行进一步处理，比如更新优惠券展示逻辑、计算总折扣等
};
</script>
